page {
  background-color: #2E2E38;
}

.top-fixed {
  width: 100%;
  &.fixed {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #2E2E38;
  }
}

.list {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
  padding: 0 40rpx;
  height: 60rpx;
  font-size: 36rpx;
  color: #FFF;

  &:nth-of-type(1) {
    margin-top: 40rpx;
  }

  .pic {
    flex: 0 0 auto;
    margin-right: 20rpx;
    width: 52rpx;
    height: 60rpx;
  }

}

.search-lists {
  display: flex;
  flex-wrap: wrap;
  padding: 0 40rpx;
  &.double {
    overflow: hidden;
    height: 140rpx;
  }
  .search-list {
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 30rpx;
    padding: 0 20rpx;
    font-size: 22rpx;
    line-height: 50rpx;
    color: #FFF;
    background: rgba(163, 163, 167, .3);
  }
  .iconfont {
    margin-top: 7.5rpx;
    flex: 0 0 auto;
    border-radius: 50%;
    height: 35rpx;
    width: 35rpx;
    font-size: 22rpx;
    text-align: center;
    line-height: 35rpx;
    color: #FFF;
    background: rgba(163, 163, 167, .3);
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  padding: 0 40rpx;
  font-size: 26rpx;
  color: #FFF;
  .tab {
    padding: 0 15rpx;
    height: 80rpx;
    line-height: 80rpx;
    &.active {
      color: #FFE501;
    }
  }
}